<template>
  <div class="table-data-view warpper">
    <div class="breadcrumb-view">
      <div class="breadcrumb-title">{{ $t($route.meta.title) }}</div>
      <div>
        <el-button type="primary" icon="el-icon-download" size="mini">产品录入要求</el-button>
        <el-button type="primary" icon="el-icon-plus" size="mini">新增</el-button>
        <el-button type="primary" icon="el-icon-download" size="mini">下载模板</el-button>
        <el-button type="primary" icon="el-icon-upload2" size="mini" @click="exportData">导出</el-button>
        <el-button type="primary" icon="el-icon-download" size="mini">导入</el-button>
      </div>
    </div>
    <div>
      <el-tabs v-model="getProduct.handle" type="card" @tab-click="handleClick" style="margin-top: 15px">
        <el-tab-pane label="已处理" name="0"></el-tab-pane>
        <el-tab-pane label="未处理" name="1"></el-tab-pane>
      </el-tabs>
    </div>
    <el-row style="margin-top: 14px" :gutter="20">
      <el-col :span="4">
        <el-select v-model="getProduct.sortList[0]" placeholder="请选择" @change="handleClick">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </el-col>
      <el-col :span="10">
        <el-input placeholder="请输入内容" v-model="getProduct.searchData" class="input-with-select">
          <el-button slot="append" @click="handleClick" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
      <el-col :span="2" :push="8">
        <el-button icon="el-icon-refresh">重置</el-button>
      </el-col>
    </el-row>
    <!-- 表格区域 -->
    <table-list v-loading="isTbLoading" ref="tableView" class="table-list-view" :tableConfig="tableConfig" :tableData="tableData"></table-list>
    <!-- 分页区域 -->
    <div>
      <el-pagination style="margin-top: 10px" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="this.getProduct.pageNow" :page-sizes="[10, 30, 50, 100]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
    </div>
  </div>
</template>

<script>
import { getProductStorage } from '@/api/productApi.js'

export default {
  data() {
    return {
      isTbLoading: true,
      // 表格配置对象
      tableConfig: {},
      // 表格数据数组
      tableData: [],
      // 查询条件
      options: [
        {
          value: 0,
          label: '请选择排序规则',
        },
        {
          value: 1,
          label: '按星级升序',
        },
        {
          value: 2,
          label: '按星级降序',
        },
        {
          value: 3,
          label: '按入库时间升序',
        },
        {
          value: 4,
          label: '按入库时间降序',
        },
        {
          value: 9,
          label: '按公司名称升序',
        },
        {
          value: 10,
          label: '按公司名称降序',
        },
      ],
      // 获取产品入库数据请求参数对象
      getProduct: {
        handle: 0,
        pageNow: 1,
        pageSize: 10,
        searchData: '',
        type: 0,
        sortList: [0],
      },
      // 表格数据总条数
      total: 0,
    }
  },
  components: {
    tableList: () => import('@/components/common_tables.vue'),
  },
  created() {
    this.tableConfig = {
      isShowIndex: true,
      props: [
        {
          type: 'text',
          label: '单位名称',
          prop: 'companyName',
        },
        {
          type: 'text',
          label: '产品类型',
          prop: 'productCategory',
        },
        {
          type: 'text',
          label: '产品名称',
          prop: 'name',
        },
        {
          type: 'state',
          label: '状态',
          prop: 'strState',
        },
      ],
      isOpt: true,
      optBtns: [
        {
          label: '查看详情',
          callback: 'viewDetails',
          code: 'mgr_edit',
        },
      ],
    }
    this.getProductInfo()
  },
  methods: {
    getProductInfo() {
      getProductStorage(this.getProduct).then((res) => {
        console.log(res, '嘻嘻')
        let list = res.data.data.records
        let tb_productlist = []
        this.total = res.data.data.total
        // 数据结构不符，重构一个数组给表格遍历
        list.forEach((el, i) => {
          tb_productlist.push(el.productChangeRecordsResult)
          tb_productlist[i].strState = '未提交'
          //   表格列状态码对应状态文字 0(未提交) 2(单位审核) 4(终审) 7(已完成)
          switch (el.state) {
            case 0:
              tb_productlist[i].strState = '未提交'
              tb_productlist[i].color = 'grey'
              break
            case 2:
              tb_productlist[i].strState = '单位审核'
              tb_productlist[i].color = 'blue'
              break
            case 7:
              tb_productlist[i].strState = '已完成'
              tb_productlist[i].color = 'green'
              break
            case 4:
              tb_productlist[i].strState = '终审'
              tb_productlist[i].color = 'blue'
              break
          }
        })
        this.tableData = tb_productlist
        this.isTbLoading = false
        console.log(this.tableData, '蚂蚁雅黑')
      })
    },
    // 监听页容量
    handleSizeChange(newsize) {
      this.isTbLoading = true
      this.getProduct.pageSize = newsize
      this.getProductInfo()
    },
    // 监听页码
    handleCurrentChange(newpage) {
      this.isTbLoading = true
      this.getProduct.pageNow = newpage
      this.getProductInfo()
      console.log(this.total, 'tatal')
    },
    handleClick(v) {
      this.getProductInfo()
    },
    //   导出数据
    exportData() {
      let data = this.tableData
      if (!data || data.length == 0) return this.$message.warning('暂无数据')
      let column = [
        { title: '单位名称', key: 'companyName' },
        { title: '产品类型', key: 'productCategory' },
        { title: '产品名称', key: 'name' },
        // { title: '状态', key: '' },
      ]
      this.$exportToExcel(column, data, '产品入库')
    },
  },
}
</script>

<style></style>
